<template>
  <div class="login">
    <mt-header title="登 录">
      <span slot="left"><mt-button icon="back" @click="leftClick"></mt-button></span>
    </mt-header>
    <div class="form-box">
      <div class="panel">
        <div class="label">
          <i class="icon icon-mobile"></i>
        </div>
        <input type="text" placeholder="手机号" v-model="phone">
        <div class="btn" v-if="phone" @click="clearPhone">
          <i class="icon icon-close-outline"></i>
        </div>
      </div>
      <div class="panel">
        <div class="label"><i class="icon icon-lock"></i></div>
        <input :type="passwordTypeText" placeholder="密 码" v-model="password">
        <div class="btn">
          <i class="icon" :class="{'icon-view-hide':passwordType==0,'icon-view-show':passwordType==1}" @click="setPasswordType"></i>
        </div>
      </div>
      <div class="register-btn">还没有账号，立即<span>注册</span></div>
      <div class="login-btn">
        <mt-button type="default" class="mint-button--large" @click="goLogin">登 录</mt-button>
      </div>
    </div>
    <div class="retrieve-password">
      <a href="javascript:;">找回密码</a>
      <a href="javascript:;">rap数据手机号密码任意</a>
    </div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex';
  import { Toast } from 'mint-ui';
  import server from '@/api/server/index';
  import {verifyPhone, verifyPassword} from '@/common/js/validate';
  export default {
  	name:'keepAlive',
    data() {
      return {
        phone: '',
        password:'',
        passwordType:0,
      }
    },
    created() {

    },
    methods: {
      ...mapActions([
          'login'
      ]),
      setPasswordType() {
        this.passwordType = !this.passwordType;
      },
      clearPhone() {
        this.phone = '';
      },
      goLogin() {

        if(!verifyPhone(this.phone)){
          Toast('请输入正确的手机号!');
          return false;
        }

        if(!verifyPassword(this.password)){
          Toast('请输入包含数字和字母6-18位密码');
          return false;
        }

        this.login({phone:this.phone,password:this.password}).then((rs)=>{
          let redirect = this.$route.query.redirect;
          redirect || (redirect = '/userCenter');
          this.$router.push({path: redirect});
        }).catch((rs)=>{
          Toast(rs);
        })
      },
      leftClick () {
        this.$router.go(-1);
      }
    },
    computed: {
      passwordTypeText() {
        if (!this.passwordType) {
          return 'password';
        }
        return 'text';
      }
    }
  }
</script>

<style lang="less">
  @import '../../common/less/variable';
  .login{
    background-color: @color-background-l;
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    .mint-header{
      background-color: @color-background-l;
      color: @color-text ;
      font-size: @font-size-medium-x;
    }
    .form-box{
      padding: 40px 25px 20px 25px;
      .panel{
        display: flex;
        padding: 5px 0;
        border-bottom: 1px solid @color-border;
        .label{
          width: 26px;
          padding-top: 10px;
          color:@color-theme;
          .icon-mobile{
            margin-left: -4px;
          }
        }
        input{
          flex: 1;
          height: 40px;
          line-height: 40px;
        }
        .btn{
          padding-top: 14px;
          width: 30px;
          text-align: right;
          color: @color-text-h;
        }
      }
      .login-btn{
        padding: 20px 0 20px 0;
        button{
          background-color: @color-theme;
          color: @color-text-w;
        }
      }
      .register-btn{
        font-weight: bold;
        padding: 20px 0;
        font-size: @font-size-medium;
        span{
          color: @color-theme;
          font-weight: bold;
          padding-left: 2px;
        }
      }
    }
    .retrieve-password{
      text-align: center;
      font-size: @font-size-medium;
      a{
        padding: 0 5px;
      }
    }
  }
</style>
